<template>
  <div class="editor-container">
    <div id="wangEditorElem"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  export default {
    props: {
      content: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        editor: '',
      }
    },
    watch: {
      content(newVal) {
        this.editor.txt.html(newVal)
      },
    },
    mounted() {
      const $this = this
      const editor = new E('#wangEditorElem')
      editor.config.menus = [
        'head', // 标题
        'bold', //  粗体
        'fontSize', //字号
        'fontName', //字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'indent', // 缩进
        'lineHeight', // 行高
        'foreColor', // 文字颜色
        'backColor', // 背景色
        'link', //链接
        'list', // 序列
        'todo', //待办事项
        'justify', // 对齐
        'quote', // 插入引用
        'emoticon', // 插入表情
        'image', // 插入图片
        'video', // 插入视频
        'table', // 插入表格
        'code', // 插入代码
        'splitLine', // 分割线
        'undo', // 撤销
        'redo', // 重复
      ]
      // 样式过滤关闭
      editor.config.pasteFilterStyle = false
      // 关闭网络图片插入
      editor.config.showLinkImg = false
      // 以下是上传图片配置
      // 上传服务器地址
      editor.config.uploadImgServer = `${this.baseURL}/hce/common/upload.do`
      // 限制图片上传大小
      editor.config.uploadImgMaxSize = 2 * 1024 * 1024
      // 限制图片格式
      editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif'] // ["jpg", "jpeg", "png", "gif", "bmp"]
      // 限制一次最多传多少张图
      editor.config.uploadImgMaxLength = 5
      editor.config.uploadFileName = 'files'
      editor.config.uploadImgHooks = {
        // 图片上传并返回了结果，图片插入已成功
        success: function (xhr) {
          $this.$baseMessage('上传成功', 'success')
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function (xhr, editor, resData) {
          $this.$baseMessage('图片插入失败', 'success')
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
          $this.$baseMessage('上传失败', 'success')
        },
        // 上传图片超时
        timeout: function (xhr) {
          $this.$baseMessage('上传超时', 'warning')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function (insertImgFn, result) {
          // result 即服务端返回的接口
          console.log('customInsert', result)
          result.data.map((item) => {
            insertImgFn(item.url) // 插入图片
          })
        },
      }
      this.editor = editor
      this.editor.create()
      this.editor.txt.html(this.content)
    },
    beforeDestroy() {
      // 销毁编辑器
      this.editor.destroy()
      this.editor = null
    },
    methods: {
      // 获取text内容
      getTextContent() {
        return this.editor.txt.text()
      },
      // 获取html内容
      getHtmlContent() {
        return this.editor.txt.html()
      },
      // 设置编辑器内容
      setContent(content) {
        this.editor.txt.html(content)
      },
      // 清空编辑器
      clearContent() {
        this.editor.txt.clear()
      },
    },
  }
</script>

<style></style>
